<template>
	<view class="my_box" :style="{overflow:boxBob?'hidden':'auto'}">
		<!-- 头部返回上一页 -->
		<view class="top_back" @click="backTo">
			<image src="https://yy.dx1126.cn/images/back.png" mode=""></image>
		</view>
		<!-- 头部背景  @click="changeImg"-->
		<view class="img_top">
			<image :src="userItem.beiSrc" mode=""></image>
		</view>

		<!-- 主体 -->
		<view class="my_content">
			<!-- 头像 -->
			<view class="my_content_top">
				<!-- @click="changeTou" -->
				<view class="image_left">
					<image :src="userItem.src" mode="" class="imgs1"></image>
					<image src="https://yy.dx1126.cn/images/vip.png" class="imgs2"
						v-show="store.userItem.username == userItem.username">
					</image>
				</view>
				<view class="my_content_top_right">
					<view class="top_right_left">
						<text>{{userItem.fenSi}}</text>
						<text>粉丝</text>
					</view>
					<view class="top_right_middle" @click="tanChang">
						<text>{{userItem.guanZhu}}</text>
						<text>关注</text>
					</view>
					<view class="top_right_right">
						<text>{{userItem.like}}</text>
						<text>获赞</text>
					</view>
				</view>
			</view>

			<!-- 个人信息 -->
			<view class="content_middle">
				<text>{{userItem.nickname}}</text>
				<text>优里号：{{userItem.username}}</text>
				<text>{{userItem.dsc}}</text>
				<view class="toSetContent" @click="aucioVideoMerge(userItem.username)"
					v-if="store.userItem.username != userItem.username" :class="{'opacitys':!gaunZhu}">
					<image src="https://yy.dx1126.cn/images/jia.png" mode="" v-show="gaunZhu"></image>
					<text v-show="gaunZhu">关注</text>
					<text v-show="!gaunZhu">已关注</text>
				</view>
			</view>

			<!-- 列表导航 -->
			<view class="my_nav_list">
				<view class="list_left" :style="{fontWeight:huaLeft==0?600:500}" @click="huaClick(0)">
					<text>作品</text>
					<text>{{zuoList.length}}</text>
				</view>
				<view class="list_minddle" :style="{fontWeight:huaLeft==250?600:500}" @click="huaClick(250)">
					<text>赞</text>
					<text>{{likeList.length}}</text>
				</view>
				<view class="list_right" :style="{fontWeight:huaLeft==500?600:500}" @click="huaClick(500)">
					<text>收藏</text>
					<text>{{shouList.length}}</text>
				</view>
				<!-- 下滑条 -->
				<text class="huaTiao" :style="{left:100+huaLeft+'rpx'}"></text>
			</view>

			<!-- 视频展示 -->
			<view class="videoList">
				<!-- 
				 show-center-play-btn	Boolean	true	是否显示视频中间的播放按钮
				 enable-play-gesture	Boolean	false	是否开启播放手势，即双击切换播放/暂停
				 -->
				<view class="videos" v-for="(item,index) in list" :key="item.videoSrc">
					<video :src="item.videoSrc" :controls="false" :show-center-play-btn="false"
						:enable-play-gesture="true" @play="quanPing(item.videoSrc)" @pause="onQuanPing(item.videoSrc)"
						:class="item.myVideoShow?'videoActive':''"></video>
					<view class="likes" v-show="!item.myVideoShow">
						<image src="https://yy.dx1126.cn/images/yidianzan.png" mode=""></image>
						<text>{{item.like}}</text>
					</view>
					<!-- 删除 -->
					<!-- <view class="close" @click="removes(item.videoSrc)" v-show="!item.myVideoShow">
						<image src="https://yy.dx1126.cn/images/close.png" mode=""></image>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 关注弹窗 -->
		<view class="guans" v-if='tanBob'>
			<view class="guans_top">
				<view class="imgx" @click="closeTan">
					<img src="https://yy.dx1126.cn/images/tuis.png" alt="">
				</view>
			</view>
			<view class="guans_con">
				<text>我的关注（{{userItem.guanZhu}}人）</text>
				<view class="guansList" v-for="item in guanList" :key="item.username" @click="toUsers(item.username)">
					<image :src="item.src" mode=""></image>
					<text>{{item.nickname}}</text>
				</view>
			</view>
		</view>
		<!-- 蒙版 -->
		<view class="meng" v-if='tanBob'></view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		useIndexStore
	} from '@/store/pinia.js';
	import {
		onLoad,
		onReady,
		onShow
	} from '@dcloudio/uni-app'
	let store = useIndexStore()

	// 返回上一页
	const backTo = () => {
		uni.navigateBack(1)
	}

	// 跳转个人信息详情页
	const toUsers = (username) => {
		uni.navigateTo({
			url: "/pages/users/users?username=" + username
		})
	}

	// 弹窗
	let tanBob = ref(false)
	// 开启弹窗
	const tanChang = () => {
		guanList.value = store.guanZhu.filter(item => item.token == userItem.value.username)
		tanBob.value = true
	}
	// 关闭弹窗
	const closeTan = () => {
		guanList.value = store.guanZhu.filter(item => item.token == userItem.value.username)
		tanBob.value = false
	}

	//视频数据
	let videoMysql = ref(store.videoMysql)
	// 遍历列表
	let list = ref([])
	// 作品
	let zuoList = ref([])

	// 赞
	let likeList = ref([])
	// 收藏
	let shouList = ref([])
	// 个人信息
	let userItem = ref({})
	// 关注
	let guanList = ref([])
	onLoad((query) => {
		let username = query.username
		userItem.value = store.userItems.find(item => item.username == username)
		zuoList.value = videoMysql.value.filter(item => item.username == userItem.value.username)
		list.value = zuoList.value
		userItem.value.like = 0
		zuoList.value.forEach(item => {
			userItem.value.like += item.like
		})
		guanList.value = store.guanZhu.filter(item => item.token == userItem.value.username)

		likeList.value = store.likeList.filter(item => item.token == userItem.value.username)
		shouList.value = store.shouList.filter(item => item.token == userItem.value.username)
		console.log(shouList.value);

		videoMysql.value.forEach((item, index) => {
			if (item.username == userItem.value.username) {
				if (item.guanShow) {
					gaunZhu.value = true
				}
			}
		})
	})

	// 关注
	// 点击关注的话
	let gaunZhu = ref(false)
	const aucioVideoMerge = (username) => {
		videoMysql.value.forEach((item, index) => {
			if (item.username == username) {
				if (item.guanShow) {
					item.guanShow = false
					store.addGuan(username)
					gaunZhu.value = false
				} else {
					uni.showModal({
						title: '确认取消关注?',
						success: function(res) {
							if (res.confirm) {
								item.guanShow = true
								store.removeGuan(username)
								gaunZhu.value = true
							}
						}
					});
				}
			}
		})
	}


	// // 更换背景
	// const changeImg = () => {
	// 	uni.chooseMedia({
	// 		count: 1,
	// 		mediaType: ['image'],
	// 		sourceType: ['album'],
	// 		success(res) {
	// 			userItem.value.beiSrc = res.tempFiles[0].tempFilePath
	// 			store.setStorageU(res.tempFiles[0].tempFilePath, userItem.value.username)
	// 		}
	// 	})
	// }
	// // 更换头像
	// const changeTou = () => {
	// 	uni.chooseMedia({
	// 		count: 1,
	// 		mediaType: ['image'],
	// 		sourceType: ['album'],
	// 		success(res) {
	// 			userItem.value.src = res.tempFiles[0].tempFilePath
	// 			store.setStorageTou(res.tempFiles[0].tempFilePath, userItem.value.username)
	// 		}
	// 	})
	// }


	// // 删除作品   
	// const close = (videoSrc) => {
	// 	uni.showModal({
	// 		title: '确认删除吗',
	// 		success: function(res) {
	// 			if (res.confirm) {
	// 				list.value.forEach((item, index) => {
	// 					if (item.videoSrc == videoSrc) {
	// 						list.value.splice(index, 1)
	// 					}
	// 				})
	// 				likeList.value.forEach((item, index) => {
	// 					if (item.videoSrc == videoSrc) {
	// 						likeList.value.splice(index, 1)
	// 					}
	// 				})
	// 				shouList.value.forEach((item, index) => {
	// 					if (item.videoSrc == videoSrc) {
	// 						shouList.value.splice(index, 1)
	// 					}
	// 				})
	// 				store.removeVideo(userItem.value.username, videoSrc)
	// 			} else if (res.cancel) {
	// 				console.log('用户点击取消');
	// 			}
	// 		}
	// 	});

	// }
	// // 取消点赞
	// const removeLike = (videoSrc) => {
	// 	uni.showModal({
	// 		title: '确认取消点赞吗',
	// 		success: function(res) {
	// 			if (res.confirm) {
	// 				list.value.forEach((item, index) => {
	// 					if (item.videoSrc == videoSrc) {
	// 						list.value.splice(index, 1)
	// 					}
	// 				})
	// 				// 1代表信息页取消
	// 				store.removeLike(videoSrc, 1)
	// 			} else if (res.cancel) {
	// 				console.log('用户点击取消');
	// 			}
	// 		}
	// 	});

	// }
	// // 取消收藏
	// const removeShou = (videoSrc) => {
	// 	uni.showModal({
	// 		title: '确认取消收藏吗',
	// 		success: function(res) {
	// 			if (res.confirm) {
	// 				list.value.forEach((item, index) => {
	// 					if (item.videoSrc == videoSrc) {
	// 						list.value.splice(index, 1)
	// 					}
	// 				})
	// 				store.removeShou(videoSrc, 1)
	// 			} else if (res.cancel) {
	// 				console.log('用户点击取消');
	// 			}
	// 		}
	// 	});

	// }
	// // 动态删除函数
	// let removes = ref(close)

	// 滑条选择
	let huaLeft = ref(0)
	const huaClick = (left) => {
		huaLeft.value = 0
		huaLeft.value = huaLeft.value + left
		switch (left) {
			case 0:
				list.value = zuoList.value;
				break;
			case 250:
				list.value = likeList.value;
				break;
			case 500:
				list.value = shouList.value;
				break;
		}
	}

	// 视频播放全屏
	// 隐藏滚动条
	let boxBob = ref(false)
	const quanPing = (vidsrc) => {
		list.value.forEach(item => {
			if (item.videoSrc == vidsrc) {
				item.myVideoShow = true
			}
		})
		boxBob.value = true
	}

	// 视频暂停退出全屏
	const onQuanPing = (vidsrc) => {
		list.value.forEach(item => {
			if (item.videoSrc == vidsrc) {
				item.myVideoShow = false
			}
		})
		boxBob.value = false
	}
</script>

<style lang="less" scoped>
	.my_box {
		width: 750rpx;
		height: 100%;
		position: relative;

		.toSetContent {
			height: 70rpx;
			width: 50%;
			background-image: linear-gradient(to top right, #fc3960, #fd7638);
			color: white;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			text {
				margin: 0 0 2px 0 !important;
			}

			image {
				width: 25rpx;
				height: 25rpx;
				margin-right: 20rpx;
			}
		}

		// 返回上一页
		.top_back {
			width: 100rpx;
			height: 100rpx;
			padding: 25rpx 30rpx;
			position: fixed;
			top: 50rpx;
			left: 0;
			z-index: 20;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		// 头部背景
		.img_top {
			width: 100%;
			height: 400rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		// 中间主体
		.my_content {
			width: 100%;
			height: calc(100% - 350rpx);
			background-color: white;
			position: absolute;
			z-index: 30;
			top: 300rpx;
			border-radius: 30rpx 30rpx 0 0;


			// 头像
			.my_content_top {
				width: 100%;
				height: 140rpx;
				padding: 20rpx 40rpx;
				display: flex;
				justify-content: space-between;

				// 头像
				.image_left {
					width: 200rpx;
					height: 200rpx;
					position: relative;

					.imgs1 {
						width: 200rpx;
						height: 200rpx;
						border-radius: 50%;
						border: 8rpx solid white;
						position: absolute;
						top: -100rpx;
					}

					.imgs2 {
						width: 150rpx;
						height: 60rpx;
						position: absolute;
						bottom: 80rpx;
						left: 50%;
						transform: translateX(-40%);
						z-index: 10;
					}
				}

				// 右部信息
				.my_content_top_right {
					flex-grow: 1;
					display: flex;
					justify-content: space-around;
					padding: 0 20rpx;

					view {
						display: flex;
						flex-direction: column;
						align-items: center;

						text {
							font-weight: 600;
							font-size: 34rpx;
						}

						text:nth-child(2) {
							font-weight: 500;
						}
					}
				}


			}

			// 信息
			.content_middle {
				width: 100%;
				display: flex;
				flex-direction: column;
				padding-left: 40rpx;

				text:nth-child(1) {
					font-size: 46rpx;
					font-weight: 600;
					margin-bottom: 10rpx;
				}

				text:nth-child(2) {
					font-size: 26rpx;
					margin-bottom: 10rpx;
				}

				text:nth-child(3) {}
			}

			// 导航列表
			.my_nav_list {
				width: 100%;
				display: flex;
				justify-content: space-around;
				height: 100rpx;
				align-items: center;
				position: relative;

				view {
					display: flex;

					text:nth-child(1) {
						flex-shrink: 0;
						margin-right: 15rpx;
					}
				}



				// 滑条
				.huaTiao {
					position: absolute;
					bottom: 0;
					left: 100rpx;
					border: 1px solid black;
					width: 50rpx;
					border-radius: 4rpx;
					transition: all 0.3s ease-in-out;
				}

			}

			// 视频展示
			.videoList {
				width: 750rpx;
				display: flex;
				flex-wrap: wrap;
				overflow: auto;
				padding: 10rpx 0 140rpx;

				.videos {
					width: 247rpx;
					height: 350rpx;
					position: relative;
					margin: 0 3rpx;
					margin-top: 6rpx;

					video {
						width: 100%;
						height: 100%;
						border-radius: 5px;
					}

					.likes {
						position: absolute;
						bottom: 10rpx;
						left: 20rpx;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 6rpx;
						}

						text {
							color: white;
						}
					}

					.close {
						position: absolute;
						bottom: 10rpx;
						right: 20rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}

					}
				}
			}
		}
	}

	// 关注弹窗
	.guans {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		height: 70%;
		background-color: white;
		z-index: 100;
		border-radius: 20rpx;
		box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
		overflow: auto;

		.guans_top {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: sticky;
			top: 0;
			background-color: white;
			z-index: 10;

			.imgx {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

		}

		.guans_con {
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;

			.guansList {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				text {
					font-weight: 600;
				}

			}

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}
	}

	// 蒙版
	.meng {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 99;
		filter: brightness(0.2);
		background-color: rgba(255, 255, 255, 0.2);
	}



	.videoActive {
		position: fixed;
		top: 0;
		left: 0;
		border-radius: 0;
		width: 100%;
		height: 100% !important;
		margin: 0;
		padding: 0;
		z-index: 20;
	}

	// 隐藏动画
	.opacitys {
		width: 40% !important;
		background-color: white;
		transition: 0.3s ease-in-out all;
	}
</style>